<template>
  <div class="app-container">
    <el-form ref="form" :model="form"   :rules="rules">

      <el-form-item label="项目名称" prop="name">
        <el-input v-model="form.name" style="width: 100%" />
      </el-form-item>
<!--      <el-form-item label="项目编码" prop="num">-->
<!--        <el-input v-model="form.num" style="width: 100%" />-->
<!--      </el-form-item>-->
      <el-form-item label="项目施工单位" prop="build">
        <el-input v-model="form.build" style="width: 100%" />
      </el-form-item>
      <el-form-item label="项目区域" prop="area">
        <el-select v-model="form.area " placeholder="请选择项目所在区域">
          <el-option label="市直管" value="371601" />
          <el-option label="滨城区" value="371602" />
          <el-option label="开发区" value="371604" />
          <el-option label="高新区" value="371605" />
          <el-option label="北海新区" value="371606" />
          <el-option label="惠民县" value="371621" />
          <el-option label="阳信县" value="371622" />
          <el-option label="无棣县" value="371623" />
          <el-option label="沾化区" value="371624" />
          <el-option label="博兴县" value="371625" />
          <el-option label="邹平市" value="371626" />
          <el-option label="工业园区" value="371627" />
        </el-select>
      </el-form-item>
      <el-form-item label="工地现场照片" prop="image">
        <el-upload
          ref="upload"
          class="upload-demo"
          multiple
          action="http://8.141.50.32/admin/subject/uploadfile"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :file-list="fileList"
          :auto-upload="false"
        >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
<!--      <el-form-item label="项目状态" prop="state">-->
<!--        <el-select v-model="form.state " placeholder="请选择项目状态">-->
<!--          <el-option label="停工" value="0" />-->
<!--          <el-option label="已开工" value="1" />-->
<!--          <el-option label="完工" value="2" />-->
<!--          <el-option label="筹建" value="3" />-->
<!--          <el-option label="立项" value="4" />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label="劳务员账号" prop="lwyzh">
        <el-input v-model="form.lwyzh" style="width: 100%" />
      </el-form-item>
      <el-form-item label="劳务员账号" prop="lwypassword">
        <el-input v-model="form.lwypassword" style="width: 100%" />
      </el-form-item>
      <el-form-item label="是否需要加购闸机" prop="pay">
        <el-input-number v-model="num" @change="handleChange" :min="0" :max="10" label="ddddddd"></el-input-number>
      </el-form-item>
<!--      <el-form-item label="安装时间">-->
<!--        <el-col :span="11">-->
<!--          <el-date-picker v-model="form.paytime_start" type="date" placeholder="请选择一个开始时间" value-format="timestamp" style="width: 100%;" />-->
<!--        </el-col>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="项目完工时间">-->
<!--        <el-col :span="11">-->
<!--          <el-date-picker v-model="form.time" type="date" placeholder="请选择一个时间" value-format="timestamp" style="width: 100%;" />-->
<!--        </el-col>-->
<!--      </el-form-item>-->
      <el-form-item label="项目联系人" prop="person">
        <el-input v-model="form.person" style="width: 100%" />
      </el-form-item>
      <el-form-item label="项目联系人电话" prop="phone">
        <el-input v-model="form.phone" style="width: 100%" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">提交</el-button>
        <el-button @click="onCancel('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { add_prjInfo } from '@/api/subject'
export default {
  data() {
    return {
      fileList: [],
      num: 0,//闸机数量
      form: {
        subject_name: '',
        subject_num: '',
        subject_build: '',
        subject_bank: '',
        lwyzh: '',
        lwypassword: '',
        subject_person: '',
        subject_phone: '',
        image_url:''
      },
      rules: {
        phone: [
          { required: true, message: '手机号不能为空' },
          { type: 'number',
            message: '手机号格式不正确',
            trigger: 'blur',
            transform (value) {
              var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
              if (!phonereg.test(value)) {
                return false
              }else{
                return Number(value)
              }
            }
          }
        ],
        name: [
          { required: true, message: '请填写项目名称', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请填写项目编号', trigger: 'blur' }
        ],
        person: [
          { required: true, message: '请填写项目联系人', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '请填写项目所在地', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // resource: [
        //   { required: true, message: '请填写项目合作银行', trigger: 'blur' }
        // ],
        build: [
          { required: true, message: '请填写项目施工单位', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        lwyzh: [
          { required: true, message: '请填写劳务员账号', trigger: 'blur' }
        ],
        lwypassword: [
          { required: true, message: '请填写劳务员密码', trigger: 'change' }
        ]
      }
    }
  },

  methods: {

    handleChange(value) {
      console.log(value);
    },

    // 文件上传
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
      this.image_url = ''
      for (const i in fileList) {
        this.image_url += fileList[i]['response'] + ';'
      }
    },
    handlePreview(file) {
      console.log(file)
    },
    handleSuccess(response, file, fileList) {
      this.image_url = ''
      for (const i in fileList) {
        this.image_url += fileList[i]['response'] + ';'
      }
    },


    onSubmit(form) {
      // 获取表单信息

      var subject_name = this.form.name// 项目铭传给你
      var subject_area = this.form.area// 项目所在地
      var subject_build = this.form.build// 项目施工单位
      var lwyzh = this.form.lwyzh// 项目服务费开始时间
      var lwypassword = this.form.lwypassword// 项目服务费
      var subject_person = this.form.person// 项目联系人
      var subject_phone = this.form.phone// 项目联系人电话

      if ( this.image_url ===undefined) {
        this.$notify({
          title: '信息',
          message: '请选择照片后再提交',
          type: 'warning',
          duration: 2000
        })
        return false
      }
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log(valid)
          add_prjInfo(
            {
              subject_image: this.image_url,
              subject_name: subject_name,
              subject_area: subject_area,
              subject_build: subject_build,
              lwyzh: lwyzh,
              lwypassword: lwypassword,
              subject_person: subject_person,
              subject_phone: subject_phone,
              zjnum:this.num
            }).then((res) => {
            if (res.code == '20000') {
              this.$message('提交成功!')
            } else {
              this.$message({
                message: '提交失败，请联系管理员!',
                type: 'error'
              })
            }
          })
        } else {
          this.$message('请填完整后再提交!')
          console.log('error submit!!')
          return false
        }
      })
    },

    onCancel(form) {
      this.$message({
        message: '数据已清空!',
        type: 'warning'
      })
      this.$refs[form].resetFields()
    }
  }
}
</script>

<style scoped>
  .line{
    text-align: center;
  }
</style>

